<template>
  <div class="">
    <box title="总体统计">
      <div class="h-[156px] flex items-center">
        <div class="flex-1 pl-[26px]" v-for="(item, index) in countAllList" :key="index">
          <div class="w-[50px] h-[53px]">
            <img :src="item.img" class="w-[50px] h-[53px] "/>
          </div>
          <div class="alltext pt-[10px] pb-[12px]">
            {{ isNullOrEmpty( item.name ) }}
          </div>
          <div class="gradient-text text-[24px] font-medium ">
            <div v-if="item.number <= 999"> {{ isNullOrEmpty( item.number ) }}</div>
            <div v-else>999+</div>
          </div>
        </div>
      </div>
    </box>
  </div>
</template>
<script setup lang="ts">
import { isNullOrEmpty } from '@/utils/functions'
import box from '@/views/large-data-screen/component/box.vue'
import {getScreenUnitglobals,} from '@/api/screen/largeData'
import img1 from '@/assets/screenimg/unity11.png'
import img2 from '@/assets/screenimg/unity22.png'
import img3 from '@/assets/screenimg/unity33.png'

const countAllList = ref([
  {
    name: '单位数量(个)',
    number: 0,
    img: img1
  },
  {
    name: '项目数量(个)',
    number: 0,
    img: img2
  },
  {
    name: '建筑数量(个)',
    number: 0,
    img: img3
  }
])
onMounted(() => {
  getcountAllList()
})
//总体统计
const getcountAllList = () => {
  getScreenUnitglobals().then(res => {     //无需传参
    countAllList.value[0].number = res.result.data.unityNum
    countAllList.value[1].number = res.result.data.projectNum
    countAllList.value[2].number = res.result.data.buildingNum
  })
}


</script>
<style scoped lang="scss"></style>
